﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>groupedItemsPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/groupedItems/groupedItems.css" rel="stylesheet" />    
    <script src="/pages/groupedItems/groupedItems.js"></script>

    <!-- Flyout's needed -->
    <link href="/pages/groupedItems/flyout.css" rel="stylesheet"/>
    <script src="/pages/groupedItems/register.js"></script>
    <link href="/pages/groupedItems/register.css" rel="stylesheet"/>

    <script>
        //$(document).ready(function () {
        //    console.log('here');
        //    // Why does it not work???? It doesn't show notFound image???
        //    $(".itemImage").error(function () {
        //        $(this).attr('src', '/images/notFound.png');
        //    });
        //});

    </script>
</head>

<body>

    <!-- These templates are used to display each item in the ListView declared below. -->
    <div class="headerTemplate" data-win-control="WinJS.Binding.Template">
        <p class="group-title win-type-x-large" data-win-bind="textContent: title; groupKey: key"
            onclick="WinJS.Navigation.navigate('/pages/groupDetail/groupDetail.html', { groupKey: event.srcElement.groupKey })" role="link">
        </p>
    </div>

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <img class="item-image itemImage" src="#" data-win-bind="src: backgroundImage; alt: title"/>
        <div class="item-overlay">

            <!-- Hieu added here. -->
            <h4 class="item-title itemTitle" data-win-bind="textContent: button"></h4>
            <input type="hidden" class="itemId" data-win-bind="value: id" />
        </div>        

    </div>

    <div class="zoomedOutItemTemplate" data-win-control="WinJS.Binding.Template">
        <div class="zoomedOutItemContainer">
            <img class="zoomeOutItemImage" src="#" data-win-bind="src: groupImage; alt: title" />
            <h4 class="zoomedOutGroupTitle" data-win-bind="textContent: title; alt: title"></h4>

            <!-- Hieu commented here. -->
            <!--<div class="zoomedOutItemCount" data-win-bind="textContent: productCount;"></div>-->

            <!-- Hieu added here. -->
            <div class="zoomedOutItemCount"></div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="fragment groupeditemspage">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <img class="topImage" src="/images/logo_tip_new.png"/>
            </h1>
        </header>
        
        <!-- ListView -->
        <section id="mainContainer" aria-label="Main content" role="main" style="">
            <div id="zoom" data-win-control="WinJS.UI.SemanticZoom" data-win-options="{ initiallyZoomedOut: false }" style="height: 100%">
                    <div id="zoomedInListView" class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
                    <div id="zoomedOutListView" class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
            </div>
        </section>

        <!-- Error message -->
        <section id="errorMessageContainer" aria-label="Main content" role="main" style="">
            <hr />
            <div id="errorMessage" style="height: 300px; color: white; font-size: 24px; margin: 20px 0px 0 100px">
                Internet connection is temporarily unavailable. Please try again later.
            </div>
        </section>
        
    </div>

<!--====================== Claim dialog - start ===========================-->
<div id="productFlyout" class="pop_bg" data-win-control="WinJS.UI.Flyout" aria-label="{Product layout label}">
                <div class="pop_head clearfix">
                	<div class="head_left">
                    	<p class="logo_mer"><img id="merLogo" alt="food" width="143" height="143" /></p>
                        <p class="address" id="merAddress"></p>
                    </div><!-- end head_left -->
                    <div class="head_right clearfix">
                    	<p class="mer_name" id="merName"></p>

                        <!--<p class="get_discount">Get <span class="merDiscount"></span>% off</p>-->
                        <p class="get_discount" id="merDiscount"></p>

                    </div><!-- end head_right -->
                </div><!-- end pop_head -->
                <div class="clear"></div>


                <div class="pop_under clearfix">

                            <!-- Result panel -->
                            <div id="messagePanel" style="font-size: 15px; color: green"></div>

                	<ul class="clearfix">
                    	<li>
                        	<p class="email_input"><input type="text" placeholder="Enter email address" value="" class="text" id="emailEditText" required /></p>
                        </li>
                        <li>
                        <p class="claim_button"><input id="claimButton" type="button" value="Claim Now"/></p>	
                        </li>
                    </ul>

                    <ul class="email_input passwordinput clearfix" id="passwordPanel">
                        <li><input type="password" placeholder="Enter your password" class="text passwordtext" id="passwordEditText" required /></li>
                        <li class="hieuButton clearfix"><input class="passbutton" id="okButton" type="button" value="OK"/></li>
                        <li class="hieuButton clearfix"><input class="passbutton" id="cancelButton" type="button" value="X"/></li>
                    </ul>

                    <!--<div class="passwordPanel">
                        <input type="password" class="passwordEditText" value="behonest" />
                        <input type="button" class="okButton" value="OK" />
                        <input type="button" class="cancelButton" value="Cancel" />
                    </div>-->

                   	<div class="clear"></div>
                    		<p class="get_coupon">
                            	Get your coupon by email or mobile.
                            </p>
                        	<p class="sms" id="merSMS"></p>
                </div><!-- end pop_under -->
                </div><!-- end pop_bg -->
<!--====================== Claim dialog - end ===========================-->

<!--====================== Register dialog - end ===========================-->
<div id="registerFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Product layout label}">
    	<div id="login_box" class="clearfix">
            <h5>Get Started</h5>
            <p class="fast">It only takes a few minutes.</p>
            
            <div id="messagePanel2" style="color: green; font-size: 20px"></div>

             <p><label>Email*</label></p>
             <p><input id="emailEditText2" type="text" class="text" required /></p>
             <p><label>Password*</label></p>
             <p><input id="passwordEditText2" type="password" class="text" required /></p>
             <p><label>Password confirmation*</label></p>
             <p><input id="passwordConfirmEditText" type="password" class="text" required /></p>
            
            <p align="right">
            	<input id="registerButton" type="button" value="Register" class="register"/>
            </p>
        </div><!-- end login_box -->
</div>
<!--====================== Register dialog - end ===========================-->

<div id="messageFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Product layout label}">
    <div class="successBox">
        <p>You've registered successfully.</p>
    </div>
</div>

</body>
</html>
